<template>
    <ul class="page">
        <li class="fruit-box" v-for="(item, index) in fruitList" :key="index">
            <div class="title">{{ item.name || '--' }}</div>
            <ul class="desc">
                <li class="item" v-for="(sitem, sindex) in labelList" :key="sindex">
                    <div class="label">{{ sitem.label }}：</div><div class="content">{{ item[sitem.prop] || '--' }}</div>
                </li>
            </ul>
        </li>
    </ul>
</template>

<script>
import blog from '@/api/blog'
export default {
    data() {
        return {
            fruitList: [{}],
            labelList: [
                {  label: '地址', prop: 'address', type: 'address'},
                {  label: '联系人', prop: 'contacts', type: 'text'},
                {  label: '电话', prop: 'number', type: 'phone'},
                {  label: '能否提供快递服务', prop: 'isExpress', type: 'text'},
                {  label: '是否支持自驾前往', prop: 'isSelfDriving', type: 'text'},
                {  label: '供应品种', prop: 'variety', type: 'text'},
                {  label: '种植面积（亩）', prop: 'area', type: 'col3'},
                {  label: '预计产量（吨）', prop: 'yield', type: 'col3'},
                {  label: '上市时间', prop: 'publishTime', type: 'col3'},
            ],
        }
    },
    mounted() {
        blog.getFruitList().then(({data}) => {
            if(data) {
                this.fruitList = data.dataList || [];
                this.labelList = data.labelList || [];
            }
        } )
    }
}
</script>

<style scoped>
.page{
    background-color: #fff;
    box-shadow: #d2d2d2;
}
.fruit-box{
    margin-bottom: 20px;
    border-bottom: 1px dashed #d2d2d2;
}

.title{
    font-size: 16px;
    text-decoration: underline;
    margin-bottom: 10px;
}
.item{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.label{
    color: #909090;
    margin-right: 10px;
}
</style>